CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಫಂಕ್ಷನ್‌ನ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ, ಮತ್ತು ಆಕರ್ಷಕ ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಕಲಿಯಿರಿ.
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಲೆಕ್ಕಾಚಾರಕ್ಕೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ API, ಆಕರ್ಷಕ ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಸಂವಹನಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ. ಇದರ ಮೂಲದಲ್ಲಿ, scroll-timeline ಪ್ರಾಪರ್ಟಿ ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಕ್ಕೆ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಂಧಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಆದರೆ ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು, range ಫಂಕ್ಷನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕ. ಈ ಲೇಖನವು CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಫಂಕ್ಷನ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ವಿವರಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಪರಿಣಾಮಗಳಿಗಾಗಿ ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂದು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಫಂಕ್ಷನ್ ಎಂದರೇನು?
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳಲ್ಲಿನ range ಫಂಕ್ಷನ್, ಅನಿಮೇಷನ್‌ಗಾಗಿ ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ನ ಸಕ್ರಿಯ ಭಾಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದಿಲ್ಲದಿದ್ದರೆ, ಅನಿಮೇಷನ್ ಸ್ಕ್ರೋಲ್‌ನ ಆರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ ರೇಖೀಯವಾಗಿ ಮುಂದುವರೆಯುತ್ತದೆ. range ಫಂಕ್ಷನ್ ನಿಮಗೆ ಆರಂಭ ಮತ್ತು ಅಂತಿಮ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಅನಿಮೇಷನ್ ಅನ್ನು ಚಾಲನೆ ಮಾಡುವ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶದ ಭಾಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶವನ್ನು ಕ್ರಾಪ್ ಮಾಡುವಂತೆ ಯೋಚಿಸಿ, ಆದ್ದರಿಂದ ಅನಿಮೇಷನ್ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ವಿಭಾಗಕ್ಕೆ ಮಾತ್ರ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.
ಇದರ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿದೆ:
range: <start-position> <end-position>;
ಇಲ್ಲಿ <start-position> ಮತ್ತು <end-position> ಅನ್ನು ಹಲವಾರು ವಿಧಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು, ಅದನ್ನು ನಾವು ವಿವರವಾಗಿ ಅನ್ವೇಷಿಸುತ್ತೇವೆ.
ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಲೆಕ್ಕಾಚಾರವು range ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ start-position ಮತ್ತು end-position ಮೌಲ್ಯಗಳಿಗೆ ಅನುಗುಣವಾದ ನಿಜವಾದ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಗಳನ್ನು ನಿರ್ಧರಿಸುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ಈ ಲೆಕ್ಕಾಚಾರವು ಅತ್ಯಗತ್ಯ ಏಕೆಂದರೆ ಸ್ಥಾನಗಳನ್ನು ವಿಭಿನ್ನ ಘಟಕಗಳು ಮತ್ತು ಸಂಬಂಧಿತ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು, ಇದು ನಿಖರವಾದ ಅನಿಮೇಷನ್ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಇವುಗಳನ್ನು ಹೇಗೆ ಅರ್ಥೈಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದನ್ನು ನಿರ್ಣಾಯಕವಾಗಿಸುತ್ತದೆ.
ಆರಂಭ ಮತ್ತು ಅಂತಿಮ ಸ್ಥಾನಗಳಿಗೆ ಘಟಕಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳು
start-position ಮತ್ತು end-position ಹಲವಾರು ವಿಭಿನ್ನ ರೀತಿಯ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತವೆ, ಇದು ಸಕ್ರಿಯ ಶ್ರೇಣಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವಲ್ಲಿ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ:
- ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳು (px): ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ನಿಖರವಾದ ಸ್ಕ್ರೋಲ್ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ,
range: 100px 500px;ಅಂದರೆ ಅನಿಮೇಷನ್ 100px ಮತ್ತು 500px ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಗಳ ನಡುವೆ ಸಕ್ರಿಯವಾಗಿರುತ್ತದೆ. ಪಿಕ್ಸೆಲ್ ಮಾಪನಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣ ಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. - ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳು (%): ಒಟ್ಟು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಸ್ಥಾನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
range: 20% 80%;ಅಂದರೆ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನವು ಒಟ್ಟು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಎತ್ತರ/ಅಗಲದ 20% ಇದ್ದಾಗ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು 80% ನಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ. ವಿಷಯದ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಸ್ಕೇಲ್ ಆಗುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. - auto: ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ. ಬಿಟ್ಟರೆ, ಆರಂಭವನ್ನು
0%ಮತ್ತು ಅಂತ್ಯವನ್ನು100%ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ, ಅಂದರೆ ಅನಿಮೇಷನ್ ಸಂಪೂರ್ಣ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶಕ್ಕೆ ಸಕ್ರಿಯವಾಗಿರುತ್ತದೆ. - ಕೀವರ್ಡ್ ಮೌಲ್ಯಗಳು: ಸ್ಕ್ರೋಲ್ ಆಗುತ್ತಿರುವ ಎಲಿಮೆಂಟ್‌ನ ಅಂಚುಗಳಿಗೆ ರೇಂಜ್ ಅನ್ನು ಸಂಬಂಧಿಸಲು ಕೆಲವು ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
ಕೀವರ್ಡ್ ಮೌಲ್ಯಗಳು: ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ ಮ್ಯಾಜಿಕ್
entry-visibility ನಂತಹ ಕೀವರ್ಡ್‌ಗಳು ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಮೇಲೆ ಡೈನಾಮಿಕ್, ಸಂದರ್ಭ-ಅರಿವಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಇವು ತೆರೆಮರೆಯಲ್ಲಿ ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ.
entry-visibility: <percentage>: ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾಗಿದೆ. ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್ ಒಳಗೆ ಎಲಿಮೆಂಟ್ (ಸಾಮಾನ್ಯವಾಗಿ ಅನಿಮೇಟೆಡ್ ಎಲಿಮೆಂಟ್ ಸ್ವತಃ) ನಿರ್ದಿಷ್ಟ ಶೇಕಡಾವಾರು ಗೋಚರಿಸಿದಾಗ ಟೈಮ್‌ಲೈನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಅದೇ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣದಲ್ಲಿ ಎಲಿಮೆಂಟ್ ದೃಷ್ಟಿಯಿಂದ ಹೊರಗೆ ಸ್ಕ್ರೋಲ್ ಆದಾಗ ಅನಿಮೇಷನ್ ಪೂರ್ಣಗೊಳ್ಳುತ್ತದೆ.
ಉದಾಹರಣೆ: ನೀವು ಒಂದು ಹೆಡ್ಡಿಂಗ್ ಅನ್ನು ವೀಕ್ಷಣೆಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಫೇಡ್ ಇನ್ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ ಎಂದುಕೊಳ್ಳೋಣ. ನೀವು entry-visibility: 50%; ಅನ್ನು ಬಳಸಬಹುದು. ಹೆಡ್ಡಿಂಗ್‌ನ 50% ಗೋಚರಿಸಿದಾಗ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಹೆಡ್ಡಿಂಗ್‌ನ 50% ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್‌ನ ಮೇಲ್ಭಾಗವನ್ನು ದಾಟಿ ಹೋದಾಗ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ. ಸ್ಕ್ರೋಲ್ ದಿಕ್ಕನ್ನು ಹಿಮ್ಮುಖಗೊಳಿಸಿದರೆ, ಅನಿಮೇಷನ್ ಕೂಡ ಹಿಮ್ಮುಖವಾಗಿ ಪ್ಲೇ ಆಗುತ್ತದೆ.
ಬ್ರೌಸರ್ ರೇಂಜ್ ಅನ್ನು ಹೇಗೆ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ
ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ start-position ಮತ್ತು end-position ಮೌಲ್ಯಗಳಿಗೆ ಅನುಗುಣವಾದ ನಿಜವಾದ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಗಳನ್ನು ನಿರ್ಧರಿಸಲು ನಿರ್ದಿಷ್ಟ ಹಂತಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
- ಘಟಕಗಳನ್ನು ಪರಿಹರಿಸುವುದು: ಬ್ರೌಸರ್ ಮೊದಲು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಘಟಕಗಳನ್ನು (px, %, ಇತ್ಯಾದಿ) ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳಿಗಾಗಿ, ಇದು ಟೈಮ್‌ಲೈನ್ ಮೂಲದ ಒಟ್ಟು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶದ ಆಧಾರದ ಮೇಲೆ ಅನುಗುಣವಾದ ಸ್ಕ್ರೋಲ್ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ.
- ಮೌಲ್ಯಗಳನ್ನು ಕ್ಲ್ಯಾಂಪ್ ಮಾಡುವುದು: ಬ್ರೌಸರ್ ನಂತರ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶದ ಗಡಿಗಳಲ್ಲಿ ಕ್ಲ್ಯಾಂಪ್ ಮಾಡುತ್ತದೆ. ಇದು ಆರಂಭ ಮತ್ತು ಅಂತಿಮ ಸ್ಥಾನಗಳು ಯಾವಾಗಲೂ ಮಾನ್ಯ ಸ್ಕ್ರೋಲ್ ರೇಂಜ್‌ನಲ್ಲಿ (0 ರಿಂದ ಗರಿಷ್ಠ ಸ್ಕ್ರೋಲ್ ಆಫ್‌ಸೆಟ್) ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಸಕ್ರಿಯ ರೇಂಜ್ ಅನ್ನು ನಿರ್ಧರಿಸುವುದು: ಸಕ್ರಿಯ ರೇಂಜ್ ಎನ್ನುವುದು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಮತ್ತು ಕ್ಲ್ಯಾಂಪ್ ಮಾಡಿದ ಆರಂಭ ಮತ್ತು ಅಂತಿಮ ಸ್ಥಾನಗಳ ನಡುವಿನ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶದ ಭಾಗವಾಗಿದೆ. ಈ ರೇಂಜ್ ಅನಿಮೇಷನ್ ಯಾವಾಗ ಸಕ್ರಿಯವಾಗಿರುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
ರೇಂಜ್ ಫಂಕ್ಷನ್ ಬಳಸುವ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು
ಆಕರ್ಷಕ ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು range ಫಂಕ್ಷನ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ:
ಉದಾಹರಣೆ 1: ಸ್ಕ್ರೋಲ್ ಮಾಡುವಾಗ ಎಲಿಮೆಂಟ್‌ಗೆ ಫೇಡ್ ಇನ್ ಮಾಡುವುದು
ಈ ಉದಾಹರಣೆಯು entry-visibility ಬಳಸಿ ವೀಕ್ಷಣೆಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹೇಗೆ ಫೇಡ್ ಇನ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
HTML:
<div class="scroll-container">
<div class="fade-in-element">
This element will fade in as you scroll.
</div>
</div>
CSS:
.scroll-container {
height: 500px;
overflow-y: scroll;
border: 1px solid black;
padding: 20px;
}
.fade-in-element {
opacity: 0;
animation: fade-in 1s linear;
animation-timeline: scroll-timeline;
animation-range: entry-visibility 25%;
animation-fill-mode: both; /* Important to retain the final state */
}
@scroll-timeline scroll-timeline {
source: auto; /* defaults to document */
orientation: block; /* defaults to block */
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
ವಿವರಣೆ:
.fade-in-elementಆರಂಭದಲ್ಲಿopacity: 0ಅನ್ನು ಹೊಂದಿದೆ.animation-timelineಪ್ರಾಪರ್ಟಿ ಅನಿಮೇಷನ್ ಅನ್ನುscroll-timelineಹೆಸರಿನ ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ.animation-range: entry-visibility 25%; ಎಲಿಮೆಂಟ್‌ನ 25% ಗೋಚರಿಸಿದಾಗ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗಬೇಕು ಮತ್ತು 25% ರಷ್ಟು ದೃಷ್ಟಿಯಿಂದ ಹೊರಗೆ ಸ್ಕ್ರೋಲ್ ಆದಾಗ ಕೊನೆಗೊಳ್ಳಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ.animation-fill-mode: both;ಅನಿಮೇಷನ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ ಎಲಿಮೆಂಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಗೋಚರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 2: ನಿರ್ದಿಷ್ಟ ಸ್ಕ್ರೋಲ್ ರೇಂಜ್‌ನಲ್ಲಿ ಎಲಿಮೆಂಟ್ ಅನ್ನು ತಿರುಗಿಸುವುದು
ಈ ಉದಾಹರಣೆಯು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ರೇಂಜ್‌ನಲ್ಲಿ ಸ್ಕ್ರೋಲ್ ಮಾಡುವಾಗ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹೇಗೆ ತಿರುಗಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
HTML:
<div class="scroll-container">
<div class="rotate-element">
This element will rotate as you scroll through the specified range.
</div>
</div>
CSS:
.scroll-container {
height: 500px;
overflow-y: scroll;
border: 1px solid black;
padding: 20px;
}
.rotate-element {
width: 100px;
height: 100px;
background-color: lightblue;
animation: rotate 2s linear;
animation-timeline: scroll-timeline;
animation-range: 20% 80%;
transform-origin: center;
}
@scroll-timeline scroll-timeline {
source: auto;
orientation: block;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
ವಿವರಣೆ:
.rotate-element100x100 ಪಿಕ್ಸೆಲ್ ಚೌಕವಾಗಿದೆ.animation-timelineಪ್ರಾಪರ್ಟಿ ಅನಿಮೇಷನ್ ಅನ್ನುscroll-timelineಹೆಸರಿನ ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ.animation-range: 20% 80%;ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನವು ಒಟ್ಟು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಎತ್ತರದ 20% ಇದ್ದಾಗ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗಬೇಕು ಮತ್ತು 80% ನಲ್ಲಿ ಕೊನೆಗೊಳ್ಳಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ. ಈ ರೇಂಜ್‌ನಲ್ಲಿ ಎಲಿಮೆಂಟ್ 360 ಡಿಗ್ರಿಗಳಷ್ಟು ತಿರುಗುತ್ತದೆ.transform-origin: center;ತಿರುಗುವಿಕೆಯು ಎಲಿಮೆಂಟ್‌ನ ಕೇಂದ್ರದ ಸುತ್ತಲೂ ಸಂಭವಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 3: ವಿಭಿನ್ನ ರೇಂಜ್‌ಗಳೊಂದಿಗೆ ಬಹು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು
ಈ ಉದಾಹರಣೆಯು ಸ್ಟ್ಯಾಗರ್ಡ್ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ಸ್ಕ್ರೋಲ್ ರೇಂಜ್‌ನೊಂದಿಗೆ, ಬಹು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೇಗೆ ಅನಿಮೇಟ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
HTML:
<div class="scroll-container">
<div class="animated-element" style="--start: 10%; --end: 30%; background-color: #f00;">Element 1</div>
<div class="animated-element" style="--start: 40%; --end: 60%; background-color: #0f0;">Element 2</div>
<div class="animated-element" style="--start: 70%; --end: 90%; background-color: #00f;">Element 3</div>
</div>
CSS:
.scroll-container {
height: 500px;
overflow-y: scroll;
border: 1px solid black;
padding: 20px;
}
.animated-element {
height: 50px;
margin-bottom: 10px;
opacity: 0;
animation: fadeIn 1s linear forwards;
animation-timeline: scroll-timeline;
animation-range: var(--start) var(--end);
}
@scroll-timeline scroll-timeline {
source: auto;
orientation: block;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
ವಿವರಣೆ:
- ಪ್ರತಿಯೊಂದು
.animated-elementತಮ್ಮ ನಿರ್ದಿಷ್ಟ ಸ್ಕ್ರೋಲ್ ರೇಂಜ್ ಅನ್ನು ಹೊಂದಿಸಲು--startಮತ್ತು--endಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಇನ್‌ಲೈನ್ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿದೆ. animation-rangeಪ್ರಾಪರ್ಟಿ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ವಿಭಿನ್ನ ರೇಂಜ್‌ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಅನ್ವಯಿಸಲುvar(--start) var(--end)ಅನ್ನು ಬಳಸುತ್ತದೆ.fadeInಅನಿಮೇಷನ್ ಕೇವಲ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಫೇಡ್ ಇನ್ ಮಾಡುತ್ತದೆ.
ರೇಂಜ್ ಫಂಕ್ಷನ್ ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
range ಫಂಕ್ಷನ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು ಮತ್ತು ಸುಗಮ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಸರಿಯಾದ ಘಟಕಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ: ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳು ಮತ್ತು ನಿಮ್ಮ ವಿಷಯದ ಲೇಔಟ್ ಆಧರಿಸಿ ಸೂಕ್ತವಾದ ಘಟಕಗಳನ್ನು (px, %, ಇತ್ಯಾದಿ) ಆಯ್ಕೆಮಾಡಿ. ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳಿಗೆ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ, ಆದರೆ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳು ನಿರ್ದಿಷ್ಟ ಸನ್ನಿವೇಶಗಳಿಗೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತವೆ.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ಅನಿಮೇಷನ್‌ನೊಳಗೆ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಪ್ಪಿಸಿ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು ಪೂರ್ವ-ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಹಾರ್ಡ್‌ವೇರ್-ವೇಗವರ್ಧಿತ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್, ಒಪಾಸಿಟಿ) ಬಳಸಿ.
animation-fill-modeಬಳಸಿ: ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನವು ಸಕ್ರಿಯ ರೇಂಜ್‌ನ ಹೊರಗಿರುವಾಗ ಅನಿಮೇಷನ್ ತನ್ನ ಅಂತಿಮ ಸ್ಥಿತಿಯನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲುanimation-fill-mode: bothಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ. ಇದು ಎಲಿಮೆಂಟ್ ಅನಿರೀಕ್ಷಿತವಾಗಿ ಅದರ ಆರಂಭಿಕ ಸ್ಥಿತಿಗೆ ಹಿಂತಿರುಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.- ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಪರಿಗಣಿಸಿ: ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ, ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯುವುದಕ್ಕಿಂತ. ಅನಿಮೇಷನ್‌ಗಳು ಸುಗಮ, ಸ್ಪಂದನಶೀಲ ಮತ್ತು ವಿಷಯಕ್ಕೆ ಸಂಬಂಧಿಸಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ API ಬೆಂಬಲವು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಬದಲಾಗಬಹುದು. ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳು ವಿಭಿನ್ನ ಪರಿಸರಗಳಲ್ಲಿ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಹರಿಸುವುದು
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳು ಹೆಚ್ಚು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗುತ್ತಿದ್ದರೂ, ಕೆಲವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಸ್ಥಳೀಯ ಬೆಂಬಲ ಇಲ್ಲದಿರಬಹುದು. ಇದನ್ನು ಪರಿಹರಿಸಲು ಕೆಲವು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:
- ಪ್ರಗತಿಪರ ವರ್ಧನೆ: ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಬಳಸಿ ಅನಿಮೇಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ, ಆದರೆ ಅನಿಮೇಷನ್ ಕಾರ್ಯನಿರ್ವಹಿಸದಿದ್ದರೂ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಮುಖ್ಯ ಕಾರ್ಯಕ್ಷಮತೆ ಹಾಗೇ ಉಳಿಯುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ಇನ್ನೂ ಕ್ರಿಯಾತ್ಮಕ ಅನುಭವವನ್ನು ಹೊಂದಿರುತ್ತಾರೆ.
- ಪಾಲಿಫಿಲ್‌ಗಳು: ಯಾವಾಗಲೂ ಪರಿಪೂರ್ಣವಾಗಿರದಿದ್ದರೂ, ಪಾಲಿಫಿಲ್‌ಗಳು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕೆಲವು ಮಟ್ಟದ ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಬಹುದು. ಸಮುದಾಯ-ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಪರಿಹಾರಗಳನ್ನು ಹುಡುಕಲು "CSS Scroll Timeline Polyfill" ಎಂದು ಹುಡುಕಿ. ಪಾಲಿಫಿಲ್‌ಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿಡಿ.
- ಷರತ್ತುಬದ್ಧ ಲೋಡಿಂಗ್: ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ. ಬ್ರೌಸರ್ ಅದನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೆ, ಸಾಂಪ್ರದಾಯಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಸ್ಕ್ರೋಲಿಂಗ್ ತಂತ್ರಗಳನ್ನು (ಇಲ್ಲಿ ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API ಉಪಯುಕ್ತವಾಗಿದೆ) ಬಳಸಿ ನೀವು ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಬಹುದು.
ಮುಂದುವರಿದ ತಂತ್ರಗಳು
ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮೀರಿ, range ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ನೀವು ಬಳಸಬಹುದಾದ ಕೆಲವು ಮುಂದುವರಿದ ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:
- ಬಹು ರೇಂಜ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು: ಒಂದೇ ಅನಿಮೇಷನ್ ಕೇವಲ ಒಂದು
animation-rangeಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊಂದಿದ್ದರೂ, ಒಂದೇ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಬಹು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಲೇಯರ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಬಹುದು, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ರೇಂಜ್‌ನೊಂದಿಗೆ. - ಡೈನಾಮಿಕ್ ರೇಂಜ್ ಅಪ್‌ಡೇಟ್‌ಗಳು: ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ಬಳಕೆದಾರರ ಸಂವಹನಗಳು ಅಥವಾ ಇತರ ಅಂಶಗಳ ಆಧಾರದ ಮೇಲೆ ನೀವು
animation-rangeಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕಾಗಬಹುದು. ಆರಂಭ ಮತ್ತು ಅಂತಿಮ ಸ್ಥಾನಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಇದನ್ನು ಸಾಧಿಸಬಹುದು. - ಪ್ಯಾರಾಲಾಕ್ಸ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸುವುದು: ಅತ್ಯಾಧುನಿಕ ಪ್ಯಾರಾಲಾಕ್ಸ್ ಸ್ಕ್ರೋಲಿಂಗ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು
rangeಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಬಹುದು. ವಿಭಿನ್ನ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಥಾನವನ್ನು ವಿವಿಧ ರೇಂಜ್‌ಗಳೊಂದಿಗೆ ಅನಿಮೇಟ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಆಳ ಮತ್ತು ದೃಶ್ಯ ಆಸಕ್ತಿಯ ಭಾವನೆಯನ್ನು ರಚಿಸಬಹುದು.
ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಅನಿಮೇಷನ್‌ಗಳ ಭವಿಷ್ಯ
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ API ಮತ್ತು range ಫಂಕ್ಷನ್, ಕಾರ್ಯಕ್ಷಮತೆಯ ಮತ್ತು ಆಕರ್ಷಕ ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸುವಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಲೇ ಇರುವುದರಿಂದ ಮತ್ತು ಡೆವಲಪರ್‌ಗಳು ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತಿರುವುದರಿಂದ, ಭವಿಷ್ಯದಲ್ಲಿ ಈ ಶಕ್ತಿಶಾಲಿ ತಂತ್ರಜ್ಞಾನದ ಇನ್ನಷ್ಟು ನವೀನ ಮತ್ತು ಸೃಜನಾತ್ಮಕ ಉಪಯೋಗಗಳನ್ನು ನಾವು ನಿರೀಕ್ಷಿಸಬಹುದು. range ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಪಡೆದುಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಟೈಮ್‌ಲೈನ್ ರೇಂಜ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಜವಾದ ತಲ್ಲೀನಗೊಳಿಸುವ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು.
ತೀರ್ಮಾನ
CSS ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್ range ಫಂಕ್ಷನ್ ಅತ್ಯಾಧುನಿಕ ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ. ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್, ಅದು ಸ್ವೀಕರಿಸುವ ವಿವಿಧ ರೀತಿಯ ಮೌಲ್ಯಗಳು, ಮತ್ತು ಬ್ರೌಸರ್ ಸಕ್ರಿಯ ರೇಂಜ್ ಅನ್ನು ಹೇಗೆ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ಪಡೆಯಬಹುದು ಮತ್ತು ನಿಜವಾದ ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು. ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಲು, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಹರಿಸಲು, ಮತ್ತು ಈ ಶಕ್ತಿಶಾಲಿ ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ಸಾಧ್ಯವಿರುವುದರ ಗಡಿಗಳನ್ನು ತಳ್ಳಲು ಮುಂದುವರಿದ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಮರೆಯದಿರಿ. ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ಸಂವಾದಾತ್ಮಕ ಮೇರುಕೃತಿಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ!